let app = getApp();
Page({
  /**
   * 页面的初始数据
   */
  data: {
    // 绘图线的粗细
    linewidth: [2, 3, 4, 5, 6, 7, 8, 9],
    // 当前默认的粗细
    currentLinewidth: 0,
    // 绘图的颜色
    color: [
      "#da1c34",
      "#8a3022",
      "#ffc3b0",
      "#ffa300",
      "#66b502",
      "#148bfd",
      "#000",
      "#9700c2",
      "#8a8989",
    ],
    // 当前默认的颜色
    currentColor: 0,
    // 判断是否开始绘画
    isStart: false,
  },
  // 改变颜色的事件
  changeColor: function (e) {
    // 获取点击画笔的编号
    let colorIndex = e.currentTarget.id;
    // 修改默认的颜色编号
    this.setData({
      cancelChange: false,
      currentColor: colorIndex,
    });
    // 设置颜色
    this.mycanvas.setStrokeStyle(this.data.color[this.data.currentColor]);
  },
  // 改变线的粗细
  changeLineWidth: function (e) {
    // 获取点击粗细的编号
    let widthIndex = e.currentTarget.id;
    // 修改当前的粗细
    this.setData({
      currentLinewidth: widthIndex,
    });
    // 设置粗细
    this.mycanvas.setLineWidth(this.data.linewidth[this.data.currentLinewidth]);
  },
  // 不同扇形对应的绘制大小
  changeStyle: function (img, imgPath) {
    // 获取图片信息并绘制
    wx.getImageInfo({
      src: imgPath,
      success: (res) => {
        this.data.deswidth = res.width;
        this.data.desHeight = res.height;
        if (img.indexOf("tuan") > 0) {
          this.mycanvas.drawImage(
            imgPath,
            40,
            20,
            this.data.windowWidth-80,
            (this.data.windowWidth-80)/0.67,
            0,
            0,
            this.data.desWidth,
            this.data.destHeight
          );
        } else if (img.indexOf("zhe")) {
          this.mycanvas.drawImage(
            imgPath,
            4,
            80,
            this.data.windowWidth,
            this.data.windowWidth/1.25,
            0,
            0,
            this.data.desWidth,
            this.data.destHeight
          );
        } else {
          this.mycanvas.drawImage(
            imgPath,
            0,
            0,
            310,
            470,
            this.data.desWidth,
            this.data.destHeight
          );
        }
        this.mycanvas.draw();
      },
    });
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.getSystemInfoAsync({
      success: (res) => {
        //   console.log(res)
          this.setData({
              windowWidth:res.windowWidth,
          })
      },
    })
    // 获得画布绘图上下文
    this.mycanvas = wx.createCanvasContext("canvas");
    // 获得传过来路径的参数
    this.setData({
      imgPath: this.options.id,
      img: this.options.title,
    });
    // console.log(this.data.imgPath);
    // console.log(this.data.img);
    this.changeStyle(this.data.img, this.data.imgPath);
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    let data = this.data;
    // 设置线的样式
    this.mycanvas.setLineCap("round");
    this.mycanvas.setLineJoin("round");
    // 初始化颜色
    this.mycanvas.setStrokeStyle(data.color[data.currentColor]);
    // 初始化粗细
    this.mycanvas.setLineWidth(data.linewidth[data.currentLinewidth]);
  },

  // 绘画开始
  canvasStart: function (e) {
    // 获取触摸点的x，y位置
    let x = e.touches[0].x;
    let y = e.touches[0].y;

    // 将画笔移动到指定坐标
    this.mycanvas.moveTo(x, y);
  },
  // 绘画进行中
  canvasMove: function (e) {
    // 获取移动过程中的x,y位置
    let x = e.touches[0].x;
    let y = e.touches[0].y;
    // 指定移动的位置
    this.mycanvas.lineTo(x, y);
    // 开始画线
    this.mycanvas.stroke();
    // 将绘画绘制到canvas
    this.mycanvas.draw(true);
    // 绘制完成，将起始点进行移动
    this.mycanvas.moveTo(x, y);
  },
  // 绘画结束
  canvasEnd: function (e) {
    // 判断是否开始绘画
    this.setData({
      isStart: true,
    });
    this.mycanvas.save();
  },
  // 清除画板
  clearCanvas: function () {
    // 清除区域
    this.mycanvas.clearRect(0, 0, 400, 475);
    this.mycanvas.draw(true);
    // 重新绘制背景图
    wx.getImageInfo({
      src: this.data.imgPath,
      success: (res) => {
        this.changeStyle(this.data.img, res.path);
        this.mycanvas.draw();
        this.mycanvas.setStrokeStyle(this.data.color[this.data.currentColor]);

      },
    });
  },
  //保存作品
  saveBig: function () {
    const token = wx.getStorageSync("token");
    if (app.globalData.isLogin == false) {
      wx.showModal({
        title: "未登录",
        content: "您还没有登录哦，快去登录吧！",
        confirmText: "去登录",
        showCancel: false,
        success: (res) => {
          if (res.confirm) {
            wx.switchTab({
              url: "/pages/myCenter/myCenter",
            });
          }
        },
      });
    } else {
      wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: 350,
        height: 475,
        destWidth: 350,
        destHeight: 475,
        canvasId: "canvas",
        success: function (res) {
          var filePath = res.tempFilePath;
          wx.showModal({
            content: "已保存到我的设计，是否保存到本地相册",
            confirmText: "是",
            cancelText: "否",
            success: (res) => {
              if (res.confirm) {
                // 图片保存到手机本地相册
                wx.saveImageToPhotosAlbum({
                  filePath: filePath,
                });
              }
            },
          });
          // 图片上传到服务器
          wx.uploadFile({
            filePath: res.tempFilePath,
            name: "img",
            url: `${app.globalData.url}/design`,
            header: {
              Authorization: token,
            },
            success: (res) => {
              console.log(res);
            },
            fail: (err) => {
              console.log(err);
            },
          });
        },
      });
    }
  },
});